<template>
    <h2 style="text-align: center;">门店列表</h2>
    <a href="/AddShop" class="btn btn-success">添加门店信息</a><br>
    门店名称:<input type="text" placeholder="请输入门店名称" v-model="name" style="margin-right: 10px;">
    门店状态:<select v-model="state" style="margin-right: 10px;">
                <option value="">请选择</option>
                <option :value="true">营业中</option>
                <option :value="false">休息中</option>
            </select>
            <input type="button" value="查询" class="btn btn-success" @click="ShowShop" />
    <table border="1" class="table table-bordered">
        <thead style="background-color: aquamarine;">
            <tr style="text-align: center;">
                <th>门店编号</th>
                <th>门店名称</th>
                <th>门店图片</th>
                <th>门店地址</th>
                <th>联系电话</th>
                <th>门店介绍</th>
                <th>入住须知</th>
                <th>交通信息</th>
                <th>门店状态</th>
                <th>开业时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr v-for="item in Info">
                <td>{{item.Shop_Id}}</td>
                <td>{{ item.Shop_Name }}</td>
                <td><img :src="item.Shop_Img" style="width: 100px;height: 100px;"/></td>
                <td>{{ item.Shop_Adress }}</td>
                <td>{{item.Shop_Phone}}</td>
                <td>{{ item.Shop_Info }}</td>
                <td>{{ item.Shop_Guide }}</td>
                <td>{{ item.Shop_Traffic }}</td>
                <td>{{ item.Shop_State?"营业中":"休息中" }}</td>
                <td>{{ moment(item.Shop_CreateTime).format("YYYY年MM月DD日")}}</td>
                <td>
                    <a @click="UpdState(item.Shop_Id)" class="btn btn-success" style="margin-right: 10px;" >修改状态</a>
                    <a @click="UpdShop(item.Shop_Id)" class="btn btn-success" >修改</a>
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        数据共{{ PageInfo.zongtiao }}条，每页{{ PageInfo.size }}条，共{{ PageInfo.index }}/{{ PageInfo.zongpage }}页
    
        <a @click="FanYe('F')" class="btn btn-success" style="margin-right: 10px;">首页</a>
        <a @click="FanYe('U')" class="btn btn-success" style="margin-right: 10px;">上一页</a>
        <a @click="FanYe('N')" class="btn btn-success" style="margin-right: 10px;">下一页</a>
        <a @click="FanYe('E')" class="btn btn-success" style="margin-right: 10px;">尾页</a>
   </span>
</template>



<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import moment from 'moment';
    import { useRouter } from 'vue-router';

    const router=useRouter();
    //显示响应式数据
    const Info=ref([{
        Shop_Id: 0,
        Shop_Name: "",
        Shop_Img: "",
        Shop_Adress: "",
        Shop_Phone: "",
        Shop_Info: "",
        Shop_Guide: "",
        Shop_Traffic: "",
        Shop_State: true,
        Shop_CreateTime: ""
    }])
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:2,
        zongtiao:0,
        zongpage:0
    })
    //分页
    const FanYe=(chooes:string)=>{
        switch(chooes)
        {
            case"F":
                PageInfo.value.index=1;
            break;
            case"U":
                if(PageInfo.value.index>1)
                {
                    PageInfo.value.index--;
                }
                else
                {
                    alert('当前已经是第一页！');
                    return;
                }
            break;
            case"N":
                if(PageInfo.value.index<PageInfo.value.zongpage)
                {
                    PageInfo.value.index++;
                }
                else
                {
                    alert('当前已经是最后一页！');
                    return;
                }
            break;
            case"E":
                PageInfo.value.index=PageInfo.value.zongpage;
            break;
        }
        ShowShop();//显示
    }
    onMounted(()=>{
        ShowShop();//显示
    })
    //显示
    const name=ref("");
    const state=ref("");
    const ShowShop=()=>{
        axios.get("https://localhost:44380/api/Shop/ShowShop",
            {
                params:{
                    name:name.value,
                    state:state.value,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Plist,
            PageInfo.value.zongpage=res.data.ZongPage,
            PageInfo.value.zongtiao=res.data.ZongTiao
        })
    }
    //修改状态
    const UpdState=(Shop_Id:number)=>{
        if(confirm("确定删除？")){
            axios.put("https://localhost:44380/api/Shop/UpdState?id="+Shop_Id)
            .then(res=>{
                if(res.data>0)
                {
                    alert('修改成功');
                    ShowShop();//显示
                }
                else
                {
                    alert('修改失败');
                }
            })
        }
    }
    //修改
    const UpdShop=(Shop_Id:number)=>{
        router.push({
            name:"UpdShop",
            params:{
                id:Shop_Id
            }
        })
    }
</script>